<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>附件信息列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
    <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/css/public.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body>

<div style="position: relative;height: 100%;">
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;附件管理</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="catZtreeValue">
            </ul>
            <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
            <div id="catRightMenus" hidden>
                <ul>
                    <li id="addNode">增加分类</li>
                    <li id="editNode">修改分类</li>
                    <li id="removeNode">删除分类</li>
                </ul>
            </div>
        </div>
        <input type="hidden" name="selectedTypeId" />
    </div>
    <div class="ccpui-coreContent" style="position: absolute;top:10px;right:10px;bottom: 0;left: 250px">
        <div id="fileListDiv">
            <table id="fileList" lay-filter="fileList" ></table>
        </div>
        <input type="hidden" name="selectedFileId" value="${selectedFileId}" />
    </div>
</div>
<script type="text/html" id="customHeaderTool">
    <div class="layui-btn-container" style="float: right;">
        <a class="layui-btn layui-btn-sm" lay-event="query" style="margin: 4px 0">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
    </div>
    <form class="layui-form" action="" style="margin-top:10px">
        <div class="table-top-filter" style="width: 600px">
            <div class="table-filter-alone">
                <label class="layui-form-label" style="width: 80px;">文件名:</label>
                <input type="text" name="Q_fileName_SL" id="fileName" class="layui-input filter-value" placeholder="文件名"
                       autocomplete="off"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label" style="width: 80px">扩展名:</label>
                <input type="text" name="Q_ext_SL" id="ext" class="layui-input filter-value" placeholder="扩展名"
                       autocomplete="off"/>
            </div>
        </div>
    </form>
</script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/layui/layui.js"></script>
<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'jquery', 'form','util', 'tree','commons', 'totalFilter', 'setter','admin','common'], function () {
        var table = layui.table, layer = layui.layer, setter = layui.setter, commons = layui.commons,
            totalFilter = layui.totalFilter, form = layui.form, $ = layui.$;
        var admin = layui.admin;
        var util = layui.util;
        var common = layui.common;


        // 初始化
        catZTree();
        loadTable('system/attachFile/selector');
        totalFilter.init();

        // region 渲染流程分类树
        function catZTree() {
            $.ajax({
                url: serverPath.workflowPath + "system/globalType/queryPersonType",
                type: "post",
                dataType: 'json',
                data: {"catKey": "FLOW_TYPE", "hasRoot": 1},
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType,
                            onRightClick: OnRightClickCat
                        }
                    };
                    $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                    component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                },
            });
        }
        // endregion
        // region 流程分类树操作
        //刷新
        $(".zTree-refresh").click(function () {
            catZTree();
        });
        //展开
        $(".zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("processTree").expandAll(true);
        });
        //收起
        $(".zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("processTree").expandAll(false);
        });
        // 树点击事件
        var typeId = "";
        var typeName = "";
        function onClickType(event, treeId, treeNode) {
            typeId = treeNode.typeId;
            typeName = treeNode.nodeKey;
            var url = 'system/attachFile/selector?typeId=' + typeId;
            if (null == treeNode.parentId) {
                url = 'system/attachFile/selector?';
            }
            loadTable(url);
            //赋值分类ID
            $("input[name='selectedTypeId']").val(typeId);
        }
        //右键菜单
        function OnRightClickCat(event, treeId, treeNode) {
            if (treeNode && !treeNode.noR) {
                ztreeNode = treeNode;
                selectCatId = treeNode.typeId;
                parentIds = treeNode.parentId;
                showRMenus(event.clientX, event.clientY);
            }
        }
        function showRMenus(x, y) {
            $("#catRightMenus").show();
            $("#catRightMenus ul").show();
            var h = $('#catRightMenus').height();
            x += 15;
            y += 10;
            if ($(window).height() < y + h) {
                y = y - h;
            }
            $("#catRightMenus").css({"top": y + "px", "left": x + "px", "visibility": "visible"});
            $("body").bind("mousedown", onBodyMouseDown);
        }
        function onBodyMouseDown(event) {
            if (!(event.target.id == "orgRightMenu" || $(event.target).parents("#catRightMenus").length > 0)) {
                $("#catRightMenus").css({"visibility": "hidden"});
            }
        }
        //增加分类节点
        $("#addNode").click(function () {
            var isRoot;
            if (ztreeNode.parentId == null) {
                isRoot = 1;//根节点
            } else {
                isRoot = 0;
            }
            layer.open({
                type: 2,
                area: ['440px', '280px'],
                title: ['新增节点'],
                content: serverPath.systemPath + setter.sysLinkPath + "globalType/view/addNode" + '?isRoot=' + isRoot + '&parentId=' + selectCatId
                ,end:function () {
                    catZtree();
                }
            });
        });
        //修改节点
        $("#editNode").click(function () {
            if (ztreeNode.parentId == null) {
                layer.alert("根节点不能修改");
            } else {
                layer.open({
                    type: 2,
                    area: ['440px', '280px'],
                    title: ['修改节点'],
                    content: serverPath.systemPath + setter.sysLinkPath + "globalType/view/addNode" + '?typeId=' + selectCatId
                    ,end:function () {
                        catZtree();
                    }
                });
            }
        });
        //删除节点
        $("#removeNode").click(function () {
            if (ztreeNode.parentId == null) {
                layer.alert("根节点不能删除");
            } else {
                layer.confirm('确定删除当前节点吗？', function (index) {
                    layer.close(index);
                    $.ajax({
                        url:  serverPath.systemPath + setter.sysLinkPath + 'system/globalType/del',
                        type: "post",
                        dataType:"json",
                        data: {"typeId": selectCatId},
                        success: function (result) {
                            layer.alert(result.msg);
                            catZtree();
                        }
                    });
                });
            }
        });
        //树状菜单隐藏
        var treeval = true;
        $(".treeone").click(function () {
            treeval = tresStyle(treeval, ".treeone");
        });
        function onClickRess(event, treeId, treeNode, clickFlag) {
            selectOrgId = treeNode.orgId;
        }
        // endregion
        // region 渲染表格
        function loadTable(url) {
            table.render({
                elem: '#fileList'
                ,url: url
                ,title: '流程选择'
                ,defaultToolbar: []
                ,toolbar: '#customHeaderTool'
                ,cols: [[
                    {type: 'radio'}
                    ,{field: 'fileName', title: '文件名', align: 'center'}
                    ,{field: 'ext', title: '扩展名', align: 'center', width: 100}
                ]]
                ,page: true
            });
        }
        $(document).on("click","#fileListDiv .layui-table-body table.layui-table tbody tr",function(){
            var obj = event ? event.target : event.srcElement;
            var tag = obj.tagName;
            var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if(checkbox.length!=0){
                if(tag == 'DIV') {
                    checkbox.click();
                }
            }
        });
        $(document).on("click","td div.laytable-cell-checkbox div.layui-form-checkbox",function(e){
            e.stopPropagation();
        });
        // endregion
        // region 表格事件
        //表格头工具栏事件
        table.on('toolbar(fileList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data; //获取选中行数据
            switch (obj.event) {
                case 'query':
                    table.reload("fileList", {
                        where: {
                            Q_fileName_SL: $("#fileName").val(),
                            Q_ext_SL: $("#ext").val()
                        },
                        page: {
                            curr: 1
                        }
                    });
                    break;
            }
        });
        // 表格checkbox事件
        table.on('radio(fileList)',function (obj) {
            var _data   = obj.data;
            if(_data) {
                $("input[name='selectedFileId']").val(_data.fileId);
                $("input[name='selectedFileId']").attr("itemName",_data.fileName);
            }
        });
        /**
         * 上传文件后的刷新
         * 若存在分类typeId，将携带typeId进行传参
         */
        window.renderTable=function (){
            var _typeId =  $("input[name='selectedTypeId']").val();
            if(_typeId!=undefined || _typeId!='') {
                loadTable('system/attachFile/selector?typeId=' + _typeId);
            }else{
                loadTable('system/attachFile/selector');
            }
        }
    });
</script>
<style>
    div#LAY_app{
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    div#catRightMenus {
        position: fixed;
        border: 1px solid #ccc;
        z-index: 900;
        visibility: hidden;
        top: 0;
        background-color: #f5f5f5;
        text-align: left;
        padding: 2px;
    }
    div.layui-table-tool-temp{
        padding-right: 10px;
    }
    div#catRightMenus ul li {
        margin: 5px 0;
        padding: 0 8px;
        cursor: pointer;
        list-style: none outside none;

    }
</style>
</body>
</html>